<template>
  <div class="empty-state">
    <div class="empty-icon">
      <i :class="iconClass" v-if="!customIcon"></i>
      <slot name="icon" v-else></slot>
    </div>
    
    <h3 class="empty-title">{{ title }}</h3>
    
    <p class="empty-description" v-if="description">
      {{ description }}
    </p>
    
    <div class="empty-actions" v-if="$slots.actions || actionText">
      <slot name="actions">
        <el-button 
          v-if="actionText"
          type="primary"
          @click="handleAction"
        >
          {{ actionText }}
        </el-button>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmptyState',
  
  props: {
    // 图标类名
    icon: {
      type: String,
      default: 'el-icon-document'
    },
    
    // 是否使用自定义图标
    customIcon: {
      type: Boolean,
      default: false
    },
    
    // 标题
    title: {
      type: String,
      required: true
    },
    
    // 描述
    description: {
      type: String,
      default: ''
    },
    
    // 操作按钮文本
    actionText: {
      type: String,
      default: ''
    }
  },
  
  computed: {
    iconClass() {
      return `${this.icon} empty-state-icon`
    }
  },
  
  methods: {
    handleAction() {
      this.$emit('action')
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #909399;
}

.empty-icon {
  margin-bottom: 20px;
  
  .empty-state-icon {
    font-size: 64px;
    color: #c0c4cc;
  }
}

.empty-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 500;
  color: #606266;
}

.empty-description {
  margin: 0 0 24px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #909399;
  max-width: 400px;
}

.empty-actions {
  margin-top: 8px;
}

// 响应式设计
@media (max-width: 768px) {
  .empty-state {
    padding: 40px 16px;
  }
  
  .empty-icon {
    .empty-state-icon {
      font-size: 48px;
    }
  }
  
  .empty-title {
    font-size: 16px;
  }
  
  .empty-description {
    font-size: 13px;
  }
}
</style>